Flask form submission without Page Reload |
您所在的位置：网站首页 › flask form submission without page reload › Flask form submission without Page Reload |
Flask form submission without Page Reload
|
October 1, 2021 Flask Leave a comment
Flask form submission without Page Reload
Issue
I have a simple flask app that displays a table of data. One of the columns has a form.
I tried to follow this tutorial on how to submit the form without it refreshing the page each time. While I got it to work, it only seems to grab the data from the first row, regardless which row’s form I submit. This was working fine without the no-refresh attempt. Concretely, if I submitted the form that resides in the second row, it would pick up the second rows data point. Any ideas? Am I supposed to apply some sort of indexing to the javascript function? {% for col in column_names %} {% if loop.index == 13 %} {% else %} {{col}} {% endif %} {% endfor %} {% for row in row_data %} {% for col, row_ in zip(column_names, row) %} {% if loop.index == 1 %} {{row_}} {% elif loop.index == 12 %} {% elif loop.index == 13 %} {% else %} {{row_}} {% endif %} {% endfor %} {% endfor %} $(document).on('submit','#reassign-form',function(e) { //console.log('hello'); console.log($("#mhh_name_id").val()) e.preventDefault(); $.ajax({ type:'POST', url:'/', data:{ mhh_key:$("#mhh_key_id").val() ,mhh_name:$("#mhh_name_id").val() ,curr_initial:$("#curr_initial_id").val() ,reassigned_initial:$("#reassigned_init").val() //value_in_app.py:id_in_form.val() }, success:function() { alert('Reassignment Submitted.'); } }) }); SolutionInside the loop you’re not changing the input id. So when you are taking the id from the JavaScript, it always takes the first value (i.e first row). And it is a bad idea to use same id everywhere. Your id should be unique. One thought is to add row_number to each id. and pass this row_no to your javascript function. First create the row_no variable right after the first loop. {% for row in row_data %} {% set row_no = loop.index %} {% for col, row_ in zip(column_names, row) %}Then add it to all your id Also I changed the JS function little bit so that it will take this number. function new_fun(e, num){ # console.log(num) # console.log($("#mhh_name_id_"+num).val()) e.preventDefault(); $.ajax({ type:'POST', url:'/', data:{ mhh_key:$("#mhh_key_id_"+num).val() ,mhh_name:$("#mhh_name_id_"+num).val() ,curr_initial:$("#curr_initial_id_"+num).val() ,reassigned_initial:$("#reassigned_init_"+num).val() //value_in_app.py:id_in_form.val() }, success:function() { alert('Reassignment Submitted.'); } }) };Answered By – NavaneethaKrishnan This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 Related Posts November 22, 2022 FLASK SQLAlchemy query,filter and give multiple returns November 22, 2022 Check if user exists before inserting into Mysql November 22, 2022 How do I use Heroku Postgres with my flask-sqlalchemy app? Programming Buddy |
【本文地址】
今日新闻 |
推荐新闻 |